<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1、引入依赖 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <div id="app"></div>

  <!-- 2、编写react代码 -->
  <script type="text/babel">

    // jsx语法  引入了babel并且type="text/babel"里面才可以写jsx语法
    const element = <h2>hello world</h2>
    /**
     * element 变量的声明右侧赋值的标签语法
     * 不是一段字符串（因为没有使用引号包裹），看起来是一段html，但能在js中直接给一个变量赋值html吗？
     * 是不可以的，必须加上type="text/babel"，否则会出现语法错误，其实它是一段jsx语法
     * 
     * JSX ？？？
     * JSX是JavaScript的语法扩展，也有很多地方称之为JavaScript XML，看起来像一段XML语法
     * 用于描述UI界面，并且可以和JavaScript融合在一起使用
     * 不同于VUE中的模板语法，不需要专门学习模板语法的指令（v-for v-if v-bind等）
     * 
     * 
     * react   html + js
     * 设计哲学  all in js
     * css in js   styled-components
     * 
     * 
     * react为什么选择jsx
     * react认为渲染逻辑本质上与其他ui逻辑存在耦合
     * 比如ui：1、需要绑定事件（button，a原生等等）；2、需要展示数据，在某些状态发生改变时，有需要改变ui
     * 渲染逻辑和ui密不可分，因而没有将标记分离到不同的文件中，而是组合到一起，这个地方就是组件
     * jsx其实就是嵌入到JavaScript中的一种结构语法
     * 
     * 
     * jsx书写规范：
     * 1、jsx的顶层只能有一个根元素，很多时候会在外层包裹一个div或者使用Fragment
     * 2、为了方便阅读，通常在jsx的外层包裹一个小括号()，并且可以进行换行书写
     * 3、jsx中的标签可以是单标签，也可以是双标签，但标签必须以/>结尾 
    */
    ReactDOM.render(element, document.getElementById('app')) 
  </script>
</body>
</html>